<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserCenter</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <style>
        /*.col-md-12,.col-lg-2{*/
        /*    border:1px solid;*/
        /*    background: #0f6674;*/
        /*    padding: 10px;*/
        /*}*/
    </style>
</head>
<body>
    <!-- 头部导航栏 -->
    <nav class="bg-white  shadow-sm  sticky-top">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar p-3 navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">
                            <img src="../../images/logo3.png" class="img-fluid" style="max-width:80px;" alt="logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">组队广场</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" href="#">
                                        活动广场
                                    </a>
                                </li>
                            </ul>
                            <ul class="navbar-nav ml-md-auto">
                                <li class="nav-item dropdown">
                                    <a class="btn btn-outline-primary nav-item  dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        发起<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cursor" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
                                    </svg>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
                                        <a class="dropdown-item " href="#">发起组队</a>
                                        <a class="dropdown-item " href="#" target="_blank">发起活动</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="btn btn-primary nav-item" href="#">
                                        消息<span class="badge badge-light ml-2">8</span>
                                            <span class="sr-only">unread messages</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-item  dropdown-toggle mr-md-2" href="#" id="my" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img class="img-fluid rounded-circle pl-2 ml-1" src="../../images/logo.jpg" style="max-width: 50px">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="my">
                                        <a class="dropdown-item " href="#">我的卡片</a>
                                        <a class="dropdown-item " href="#" target="_blank">个人中心</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">退出登陆</a>
                                    </div>

                                </li>
                            </ul>

                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>
    <section class="mt-2">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center p-3 my-3 text-white-50 rounded border-bottom">
                        <img class="mr-3  rounded-circle shadow" src="../../images/logo.jpg" alt="" width="48" height="48">
                        <div class="lh-100">
                            <h6 class="mb-0 text-muted lh-100">NickName</h6>
                            <small class="text-primary">@Username</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- 测边导航栏-->
                <div class="col-lg-2 col-md-12 ml-2">
                    <p class="pl-4 d-none d-lg-block">
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-circle mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.468 12.37C12.758 11.226 11.195 10 8 10s-4.757 1.225-5.468 2.37A6.987 6.987 0 0 0 8 15a6.987 6.987 0 0 0 5.468-2.63z"/>
                            <path fill-rule="evenodd" d="M8 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                            <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
                        </svg>
                        用户中心
                    </p>
                    <ul class="nav nav-pills justify-content-center border">
                        <li class="nav-item pt-2">
                            <a class="nav-link active" href="#">个人信息修改</a>
                        </li>
                        <li class="nav-item pt-2">
                            <a class="nav-link" href="#">头像修改</a>
                        </li>
                        <li class="nav-item pt-2">
                            <a class="nav-link" href="#">密码修改</a>
                        </li>
                        <li class="nav-item pt-2">
                            <a class="nav-link" href="#">查看我的发布</a>
                        </li>
                        <li class="nav-item pt-2">
                            <a class="nav-link" href="#">查看登陆日志</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9 col-md-12 ml-2">
                    <p class="d-none d-lg-block">基本信息</p>
                    <form class="mt-3">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="inputNickName">昵称</label>
                                <input type="text" class="form-control" id="inputNickName" placeholder="kkk">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="inputTel">电话</label>
                                <input type="tel" class="form-control" id="inputTel" placeholder="110">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail">邮箱</label>
                            <input type="email" class="form-control" id="inputEmail" placeholder="1232@qq.com">
                        </div>
                        <div class="form-group">
                            <label for="inputDescription">个人描述</label>
                            <textarea class="form-control" id="inputDescription" placeholder="性格有点怪"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="inputSkill">技能描述</label>
                            <textarea class="form-control" id="inputSkill" placeholder="很ok"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.bundle.js"></script>
</body>
</html>